﻿@page
@model NewsModel
@{
    ViewData["Title"] = "News";
}

<h2>News</h2>

<div id="app">
    <form>
        <input type="text" name="Content" value="" v-model="content" />
        <button v-on:click="addnews" type="button">添加</button>
    </form>

    <template v-if="list!== undefined && list.length > 0">
        <table class="table table-condensed table-striped table-bordered table-hover">
            <tr>
                <td>Id</td>
                <td>内容</td>
                <td>创建时间</td>
                <td>最后更新时间</td>
                <td>删除</td>
            </tr>
            <tr v-for="news in list">
                <td>{{news.id}}</td>
                <td>{{news.content}}</td>
                <td>{{news.createTime | formatDate}}</td>
                <td>{{news.lastUpdateTime | formatDate}}</td>
                <td><a href="javascript:;" v-on:click="delnews(news.id)">删除</a></td>
            </tr>
        </table>
    </template>
</div>

@section Scripts{
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                content: "",
                list: []
            },
            created:function() {
                this.getlist();
            },
            filters: {
                /* 时间过滤器 */
                formatDate(time) {
                    return moment(time).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            // 在 `methods` 对象中定义方法
            methods: {
                delnews: function (id) {
                    this.$http.delete("/api/news/"+id).then((response) => {
                        this.getlist();
                        //console.log(response);
                    });
                },
                addnews: function(){
                    var url = "/api/news";
                    this.$http.post(url, {
                        content: this.content
                    }).then((response) => {
                        this.content = "";
                        this.getlist();
                        //console.log(result);
                     });
                    //console.log("se");
                },
                getlist:function(){
                    this.$http.get("/api/news").then(function (result) {
                        this.list = result.body; //console.log(value);
                    }, function (response) {
                        console.info(response);
                    });
                }
            }
        });
    </script>
}